<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>编辑器</el-breadcrumb-item>
    <el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
  </el-breadcrumb>

  <vue3-tinymce v-model="state.content" :setting="state.setting" />

  <el-button type="primary" @click="fn">提交</el-button>

  <div>展示:</div>
  <!-- <div>{{ state.content }}</div> -->
  <div v-html="state.content"></div>
</template>

<script lang="ts" setup>
import Vue3Tinymce from "@jsdawn/vue3-tinymce";

import { reactive } from "vue";

const state = reactive({
  content: "",
  // editor 配置项
  setting: {
    height: 400, // editor 高度
  },
});

const fn = () => {
  console.log(state.content);
};
</script>
